<?php
$this->load->helper('echo_helper');
$this->load->helper('url');

?>
<!DOCTYPE html>
<html lang="en">
    <head>
				<base href="<?=site_url()?>">
				<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Báo Việt</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
        <meta name="description" content="Experimental Page Layout Inspired by Flipboard" />
        <meta name="keywords" content="flip, pages, flipboard, layout, responsive, web, web design, grid, ipad, jquery, css3, 3d, perspective, transitions, transform" />
        <meta name="author" content="" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
				<link href='http://fonts.googleapis.com/css?family=Noto+Sans&subset=latin,vietnamese' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/modernizr.custom.08464.js"></script>
		<script id="pageTmpl" type="text/x-jquery-tmpl">
			<div class="${theClass}" style="${theStyle}">
				<div class="front">
					<div class="outer">
						<div class="content" style="${theContentStyleFront}">
							<div class="inner">{{html theContentFront}}</div>
						</div>
					</div>
				</div>
				<div class="back">
					<div class="outer">
						<div class="content" style="${theContentStyleBack}">
							<div class="inner">{{html theContentBack}}</div>
						</div>
					</div>
				</div>
			</div>			
		</script>
    </head>
    <body>
		<div id="user_cookie_ele" style="display: none"><?=$user_cookie?></div>

		
		<header class="main-title">
			<h1><strong>Báo</strong> Việt - <strong>Báo</strong> của bạn!</h1>
			<style>
			@media only screen and (max-width: 767px) {
				.hide-for-small {
					display: none;
				}
			}
			</style>
			<div class="hide-for-small">
				<p>BáoViệt.vn là website tập hợp tự động các tin tức từ nhiều tờ báo mạng hàng đầu tại Việt Nam.</p>
				<p>BáoViệt.vn được xây dựng để trở thành tờ báo của riêng bạn.</p>
				<p>BáoViệt.vn có giao diện phù hợp với nhiều thiết bị cầm tay như smartphone hay tablet.<p>

				<p>Website thực hiện bởi nhóm TTK - Hackday 08 July 2013 HCMC</p>
				<ul>
					<li>- Bùi Tiến Tuân (bttvn.4t@gmail.com)</li>
					<li>- Đinh Quang Trung (dinhquangtrung90@yahoo.com)</li>
					<li>- Lê Ngô Kha (lengokha.nk@gmail.com)</li>
				</ul>
							<p>Lật trang để có những trải nghiệm thú vị!</p>
							<p><strong>Hiển thị tốt nhất trên Sarafi và Google Chrome</strong></p>
			</div>
		</header>
		
		<div id="flip" class="container">
		
			<div class="f-page f-cover">
				<div style="background-image: url(images/logo_baoviet.png); width 100%; height: 100%; background-repeat: no-repeat; background-position: center left;"></div>
				<div class="f-cover-flip">&lt; Lật trang</div>
			</div>

			
			<?php
			$counter = 0;
			foreach ($data as $c) {
				$counter++;
			?>
			<div class="f-page">
				<div class="f-title">
					<a></a>
					<h2><?=$c[0]->cat_name?></h2>
					<a></a>
				</div>
				
				<?php echo_temp($c, $counter % 3 + 1) ?>
			
			</div>
			
			<?php } ?>
			
			<div class="f-page">
				<div class="f-title">
					<a href="http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/"></a>
					<h2>Tùy chọn nội dung</h2>
					<a href="http://tympanus.net/codrops/2012/05/07/experimental-page-layout-inspired-by-flipboard/"></a>
				</div>
				
					<h1>Chọn nội dung theo sở thích của bạn</h1>
					<div style="text-align: left">

						<style>
						
							.categories_sources{
								display: inline-block;
								background-color: #DDDDDD;
								padding: 5px;
								margin: 0.3em;
								font-size: 20px;
								-webkit-border-radius: 5px;
								-moz-border-radius: 5px;
								border-radius: 5px;
								
							}
							.scroll_box{
								overflow:auto;
							}
							table td {
								vertical-align: top;
							}
						</style>
						<div class="box w-70 h-100">
							<h2>Các nguồn tin phổ biến</h2>
							<?php foreach ($categories as $c) { ?>
								<h2><label><input class="select_my_cat" <?php if (in_array($c->cat_id, $user_cat)) echo "checked=checked"; ?> catid="<?=$c->cat_id?>" type="checkbox"/><?=$c->cat_name?></label></h2>
								<?php foreach ($source_as_cat[$c->cat_id] as $sc) { ?>
									<div class="categories_sources">
										<?=$sc->source_name?>
									</div>
								<?php } ?>
							<?php } ?>
							
						</div>
						<div class="box w-20 h-100">
							<h2>Thêm nguồn tin tự chọn:</h3>
							<table>
								<tr>
									<td>Nguồn RSS: </td>
									<td><input id="new_rss_source" type="text"/></td>
								</tr>
								<tr>
									<td>Trang chủ: </td>
									<td>
									<select id="select_homepage" style="width: 100%">
									<?php foreach ($sources as $s) { ?>
										<option url="<?=$s->source_homepage?>" value="<?=$s->source_id?>"><?=$s->source_name?></option>
										
									<?php } ?>
									</select>
									<br/>
									<input id="select_homepage_url" type="text" value="<?=$sources[0]->source_homepage?>" placeholder="Địa chỉ: http://..."/>
									<br/>
									<input id="select_homepage_name" type="text" value="<?=$sources[0]->source_name?>" placeholder="Tên nguồn: Dân Trí..."/>
									<br/>
									<input id="select_homepage_id" value="<?=$sources[0]->source_id?>" type="hidden"/>
									</td>
								</tr>
								<tr>
									<td>Chuyên mục: </td>
									<td>
									
									<select id="select_cat" style="width: 100%">
									<?php foreach ($categories as $c) { ?>
										<option value="<?=$c->cat_id?>"><?=$c->cat_name?></option>
									<?php } ?>
									</select>
									<br/>
									<input id="select_cat_name" type="text" value="<?=$categories[0]->cat_name?>"/>
									<br/>
									<input id="select_cat_id" value="<?=$categories[0]->cat_id?>" type="hidden"/>
									</td>
								</tr>
								<tr>
									<td><input id="add_new_rss" style="padding: 5px; width: 100%" type="button" value="Thêm"/><br/><br/><br/></td>
								</tr>
							</table>
						</div>
					</div>
			
			</div>
			
			<div class="f-page f-cover-back">
				<div id="codrops-ad-wrapper">
					<img src="images/about.jpg" width="100%"/>
				</div>
			</div>
		</div>
	
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script type="text/javascript">
				
			var $container 	= $( '#flip' ),
				$pages		= $container.children().hide();
			
			Modernizr.load({
				test: Modernizr.csstransforms3d && Modernizr.csstransitions,
				yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
				nope: 'css/fallback.css',
				callback : function( url, result, key ) {
					
					if( url === 'css/fallback.css' ) {
						$pages.show();
					}
					else if( url === 'js/jquery.flips.js' ) {
						$container.flips();
					}
			
				}
			});


			$(document).ready(function() {
				$('body').on('change', '#select_cat', function() {
					$('#select_cat_name').val($('#select_cat option:selected').text());
					$('#select_cat_id').val($(this).val());
				});
				$('body').on('change', '#select_homepage', function() {
					$('#select_homepage_url').val($('#select_homepage option:selected').attr('url'));
					$('#select_homepage_name').val($('#select_homepage option:selected').text());
					$('#select_homepage_id').val($(this).val());
				});
				
				
				$('body').on('click', '#add_new_rss', function() {
					alert("Chức năng tạm khóa!");
					/* $.ajax({
						type: "POST",
						url: "./ajax/new_rss_feed",
						data: {new_rss_source: $('#new_rss_source').val(),
									select_homepage_url: $('#select_homepage_url').val(),
									select_homepage_name: $('#select_homepage_name').val(),
									select_homepage_id: $('#select_homepage_id').val(),
									select_cat_name: $('#select_cat_name').val(),
									select_cat_id: $('#select_cat_id').val()}
					}).done(function(msg) {
						if (msg == "OK") {
							alert("Đã thêm thành công! Refresh lại trang để cập nhật tin tức mới");
						}
					}); */
				});
				
				$('body').on('click', '.select_my_cat', function() {
					var obj = $(this);
					$.ajax({
						type: "POST",
						url: "./ajax/user_cat_select",
						data: {user_cookie: $('#user_cookie_ele').html(),
									cat_id: obj.attr('catid'),
									checked: obj.is(':checked')}
					}).done(function(msg) {
							console.log(msg);
					});
				});
				
			});
		</script>

    </body>
</html>